<template>
  <div>
    <h1>组件事件emit</h1>
    <div>
      <h2>SonDemo8</h2>
      <SonDemo8 class="groupBorder" :user msg="躺尸七天" @son-emit="emitHandler"></SonDemo8>
      <hr />
      <hr />
      <h2>SonDemo10</h2>
      <SonDemo10
        class="groupBorder"
        :user
        msg="躺尸七天"
        @son-emit="emitHandler"
        @son-emit2="emitHandler2"
      ></SonDemo10>

      <hr />
      <hr />
      <h2>Study1StuDemo2</h2>
      <Study1StuDemo2 @inFocus="inFocusHandler" class="groupBorder"></Study1StuDemo2>
      <hr />
      <h2>SonDemo11</h2>
      <SonDemo11 class="groupBorder" :user @submit="submitHandler"></SonDemo11>

      <hr />
      <h2>SonDemo12</h2>
      <SonDemo12 class="groupBorder" :user @editUser="editUserHandler"></SonDemo12>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study4StuDemo3'
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import { type Iuser } from './components/SonDemo8.vue'
import SonDemo8 from './components/SonDemo8.vue'
import SonDemo10 from './components/SonDemo10.vue'
import Study1StuDemo2 from '@/views/study1/StuDemo2.vue'
import SonDemo11 from './components/SonDemo11.vue'
import SonDemo12 from './components/SonDemo12.vue'

const user = ref<Iuser>({
  age: 66,
  name: '黄嘉辉',
  sex: '男'
})
// 888
const emitHandler = (p1: number, p2: string, p3: { name: string }) => {
  console.log('此函数是由子组件使用emit触发调用', p1, p2, p3)
}

const emitHandler2 = () => {
  console.log(' @son-emit2="emitHandler2"')
}

const inFocusHandler = () => {
  console.log(' inFocusHandler')
}

const submitHandler = () => {
  console.log(' submitHandler')
}

const editUserHandler = (user: Iuser) => {
  console.log(user, 'editUserHandler')
}
</script>

<style lang="scss" scoped>
.groupBorder {
  border: 2px solid #2888c3;
  padding: 10px;
  margin: 10px;
}
</style>
